<!DOCTYPE HTML>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../css/reset.css"/>
    <style type="text/css">
        .article {

        }

        .article_page {
            padding: 30px 0;
            background-color: #ffffee;
        }

        .article_page:nth-child(even) {
            background-color: #ffeeff;
        }

        .article_page p {
            padding: 0 30px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="article"></div>

<script type="text/javascript" src="../js/requirejs/2.1.14/require.js"></script>
<script type="text/javascript">
    require.config({
        baseUrl: '../js/',
        paths: {
            'Zepto': 'zepto/1.1.3/zepto'
        },
        shim: {
            'Zepto': {
                exports: 'Zepto'
            }
        }
    });

    define('main', function (require) {
        var $ = require('Zepto');
        var klass = require('base/klass');
        var FontStyleController = require('app/FontStyleController');
        var renderPage = require('app/renderPage');

        function main () {
            var $article = $('#article');
            var fontStyleController = new FontStyleController();
            var fontStyle = ['small', 'normal', 'big'];

            $.ajax({
                url: '../data/1',
                type: 'get',
                dataType: 'text',
                success: function (data) {
                    fontStyleController.set(fontStyle[Math.floor(Math.random() * 3)]);
                    var htmlStr = renderPage({
                        article: data,
                        pageClass: 'article_page',
                        fontStyleStatus: fontStyleController.getStatus()
                    });
                    $article.css(fontStyleController.getStatus().style);
                    $article.html(htmlStr);
                }
            });
        }

        return function () {
            $(function ($) {
                main();
            });
        };
    });

    require(['main'], function (main) {
        main();
    });
</script>
</body>
</html>